<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>${fns:getConfig('productName')}登录</title>
	<%@include file="/WEB-INF/views/include/head.jsp" %>
	<style type="text/css">
     	form{
			position:absolute;
			left:50%;
			top:50%;
			width:400px;
			height:300px;
			margin:-150px 0 0 -200px;
		}
		#messageBox {
			background: #fff;
			position: absolute;
			top: -30px;
			left: 0px;
			width:100%;
			border: 1px solid #e5e5e5;
			display: none;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			line-height: 30px;
			text-align: center;
			color:red;
			font-size:20px;
		}
		.ui-mobile form label {
			display: block;
		}
		#rememberMe{
			display:none;
		}
		#rememberMeLabel{
			background:transparent;
			color:#000;
			border:0;
		}
		div.ui-input-text {
			padding: 0 .4em;
			display:block;
		}
		#infoDiv{
			overflow: auto;
			display: block;
			word-break:break-all;
			margin-left: auto;
			margin-right:auto; 
			font-size: 20px;
		}
		#infoDiv p{
			text-align: center;
		}
    </style>
	<script type="text/javascript">
		$(document).ready(function() {
		 	if(window.localStorage){
		 		var now = Date.parse(new Date());
				if (localStorage.lastUpdateTime && now - localStorage.lastUpdateTime > 1000 && localStorage.sessionId){
					var url  = "${pageContext.request.contextPath}/servlet/validateExit?sessionId=" + localStorage.sessionId;
					jQuery.ajax({
						type : 'GET',
						url : url,
						success : function(data) {
							backFun();
						}
					});
					return;
				}
				$("#loginContent").show();
			} else {
				$("#infoContent").show();
			}
			$("#loginForm").validate({
				submitHandler: function(form){
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("请填写用户名和密码！");
				}
			});
		});
		function backFun(){
			localStorage.lastUpdateTime = "";
			localStorage.sessionId = "";
			window.location.href = "${ctx}";
		}
	</script>
</head>
<body>
	<section data-role="page" id="home" data-theme="a">
 		<header data-role="header" data-position="fixed">
        	<h1>博通美容专家系统 - 系统登录</h1>
        </header>
        <article id="infoContent" data-role="content" style="display: none;">
        	<div id="infoDiv">
	        	<p>您的浏览器版本过低，无法使用此应用，建议如下：</p>
	        	<table style="margin-left: auto;margin-right:auto; ">
	        		<tr>
	        			<td>pc客户端 </td>
	        			<td>IE9+ Firefox 3.5+ Chrome 3.0+ Safari 3.0+ Opera 10.5+</td>
	        		</tr>
	        		<tr>
	        			<td>andriod平台 </td>
	        			<td>QQ浏览器，天天浏览器，UC浏览器，Chrome浏览器</td>
	        		</tr>
	        		<tr>
	        			<td>ios平台</td>
	        			<td>Safari浏览器</td>
	        		</tr>
	        	</table>
        	</div>
        </article>
        <article id="loginContent" data-role="content" style="display: none;">
            <form id="loginForm" action="${ctx}/login" method="post">
            	<%String error = (String) request.getAttribute(FormAuthenticationFilter.DEFAULT_ERROR_KEY_ATTRIBUTE_NAME);%>
				<div id="messageBox" style="display:<%=error==null?"none":"block"%>"><%=error%></div>
				<label for="textinput-hide" class="ui-hidden-accessible">Text Input:</label>
				<input type="text" name="username" id="username" placeholder="请输入登陆账号" value="" class="required">
				<label for="textinput-hide" class="ui-hidden-accessible">Text Input:</label>
				<input type="password" name="password" id="password" placeholder="请输入登陆密码" value="" class="required">
				<input type="checkbox" name="rememberMe" id="rememberMe">
		    	<label id="rememberMeLabel" for="rememberMe">记住登录状态</label>
		    	<input type="submit" value="登陆">
			</form>
        </article>
        <footer data-role="footer" data-position="fixed">
            <h4>香港博通管理咨询有限公司</h4>
        </footer>
	</section>
</body>
</html>
